<template>
<div>
	<div class="header wrapper" v-if="!isMobile">
		<div class="logo fl" @click="toHome">
			<img src="../../assets/image/logo.png" alt="">
		</div>
		<ul class="menu_list fl">
			<li v-for="(item, index) in menuList" :class="{'active': tab_id == index }" @click="clickMenu(index)" :key="item">{{item}}</li>
			<li @click="toAbout" :class="{'active': tab_id == 5 }">关于我们</li>
		</ul>
		<div class="appointment fr"> 
			<span class="phone">010-56863848</span>
			<div class="btn_appointment btn" @click="appointmentClick">预约试听</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="header" v-if="isMobile">
		<div class="logo fl"  @click="toHome">
			<img src="../../assets/image/logo.png" alt="">
		</div>
		<div class="appointment fr"> 
			<div class="btn_appointment btn" @click="appointmentClick">预约试听</div>
		</div>
		<div class="clear"></div>
	</div>

<!-- <transition name="el-zoom-in-center"> -->
	<div class="mask" v-if="maskShowStatus">
		<div class="popup">
			<template>
				<div  class="appointment_popup">
					<div class="step1" v-if="appointmentStep == 1">
						<i class="icon_close_small"  @click="maskShowStatus = false"></i>
						<h4 class="title">立即预约</h4>
						<el-form :model="formAppointment" label-position="left"  ref="formData" class="rule_form">

							<el-form-item prop="phone">
								<el-input v-model="formAppointment.mobile" placeholder="请输入手机号码(必填)" maxlength=11></el-input>
							</el-form-item>

							<el-form-item prop="name">
								<el-input v-model="formAppointment.studentName" placeholder="请输入您的孩子姓名"></el-input>
							</el-form-item>

							<el-form-item prop="schoolArea">
								<el-select @change="changeSchool" v-model="formAppointment.schoolId" placeholder="附近校区">
									<el-option :label="item.schoolName" :value="item.schoolId" 
										v-for="(item, index) in schoolAreaList" :key="index">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="age">
								<el-select v-model="formAppointment.childAge" placeholder="请选择您的孩子年龄">
									<el-option :label="item.dicLabel" :value="item.dicCode" 
									v-for="(item, index) in studentAgeList" :key="index">
								</el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="curriculum">
								<el-select v-model="formAppointment.productId" placeholder="请选择试听课程">
									<el-option :label="item.productName" :value="item.productId" 
										v-for="(item, index) in classList" :key="index">
									</el-option>
								</el-select>
							</el-form-item>

							<div class="btn_box">
								<div class="btn btn_submit_appointment" @click="nextStep('appointmentStep',2)">提交预约</div>
							</div>

							<span class="desc">
								<span>完善以上信息，权威的课程顾问将会第一时间联系您哦！</span>
								
							</span>

						</el-form>
					</div>

					<div class="step2" v-if="appointmentStep == 2">
						<i class="icon_close_small" @click="maskShowStatus = false"></i>
						<i class="step"></i>
						<el-form :model="verificodeData" label-position="left"  ref="formData" class="rule_form">

							<el-form-item prop="phone">
								<el-input v-model="verificodeData.phone" readonly placeholder=""></el-input>
							</el-form-item>

							<el-form-item prop="verificode" style="position: relative;">
								<el-input v-model="verificodeData.verificode" placeholder="请输入验证码" maxlength=6></el-input>
								<div class="veri_code fr" @click="initValCode" v-if="veri_time==0">获取验证码</div>
								<div class="veri_code fr" v-if="veri_time!==0">{{veri_time}} 秒</div>
								<div class="clear"></div>
							</el-form-item>

							<div class="btn_box">
								<div class="btn btn_submit_appointment" @click="appointmentSubmit('appointmentStep',3)">立即预约</div>
							</div>

							


						</el-form>
					</div>

					<div class="step3 appointment_success" v-if="appointmentStep == 3" @click="maskShowStatus = false;">
						<i class="icon_success"></i>
						<p class="success_msg">预约成功</p>
						<template>
							<p class="success_desc">您已成功预约试听课程 </p>
							<p class="success_desc">稍后将有专业课程顾问联系您</p>
						</template>
					</div>
				</div>
			</template>
		</div>
	</div>
<!-- </transition> -->
</div>
</template>




<style scoped>
  /*================== header ====================*/
	.container{
		width: 100%;
	}

	.header{
		height: 100px;
		width: 100%;
		position: relative;
	}
	.header .logo {
		height: 100%;
		width: 266px;
	}
	.header .logo img{
		width: 88%;
		padding: 3.3% 0;
	}

	.menu_list{
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: 303px;
	}
	.menu_list li {
		display: inline-block;
		margin-right: 38px;
		font-size:18px;
		color: #333;
		position: relative;
		cursor: pointer;
	}
	.menu_list li.active {
		color: #FFD37C;
	}
	.menu_list li.active:after {
		content: '';
		position: absolute;
		bottom: -19px;
		left: 50%;
		transform: translateX(-50%);
		display: inline-block;
		width: 80%;
		margin: 0 auto;
		height:4px;
		background:rgba(255,211,124,1);
		border-radius:2px;
	}
	.menu_list li:last-child {
		margin-right: 0;
	}

	.appointment{
		line-height: 100px;
	}
	.appointment .phone {
		font-size: 14px;
		position: relative;
		display: inline-block;
		padding-left: 20px;
	}
	.appointment .phone:before {
		content: '';
		display: inline-block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		background: url('../../assets/image/icon_phone.png') 0 0 no-repeat;
	}
	.appointment .btn_appointment{
		display: inline-block;
		width: 102px;
		height: 37px;
		line-height: 37px;
		font-size: 16px;
		vertical-align: middle;
		margin-top: -8px;
		cursor: pointer;
		margin-left: 19px;
		/* background: url('../assets/image/btn_appointment.png') 0 0 no-repeat; */
	}
/*================== header ====================*/

.mask .btn_submit_appointment{
	width: 100%;
	height: 53px;
	line-height: 53px;
	font-size: 24px;
}

.mobile_container .mask .btn_submit_appointment {
	font-size: .64rem;
}
</style>

<style>
	
	.mobile_container{
		width: 100%;
	}

	.mobile_container .header {
		position: fixed !important;
		z-index: 11;
		background: #fff;
		top: 0;	
		height: 2.133333rem;
		line-height: 2.133333rem;
		box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.19)
	}


	.mobile_container .header .logo {
		height: 100%;
		width: 4.266667rem;
		margin-left: .266667rem;
	}
	.mobile_container .header .logo img{
		width: 100%;
		padding: 7.3% 0;
	}
	.mobile_container .appointment{
		/* line-height: 100px; */
		width: 5.2rem;
		line-height: 2.133333rem;
		text-align: right;
		margin-right: .266667rem;
	}
	.mobile_container .appointment .phone {
		font-size: 14px;
		position: relative;
		display: inline-block;
		padding-left: 20px;
	}
	.mobile_container .appointment .phone:before {
		content: '';
		display: inline-block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		background: url('../../assets/image/icon_phone.png') 0 0 no-repeat;
	}
	.mobile_container .appointment .btn_appointment{
		display: inline-block;
		width: 102px;
		height: 37px;
		line-height: 37px;
		font-size: 16px;
		vertical-align: middle;
		/* margin-top: -8px; */
		cursor: pointer;
		margin-left: 19px;
		/* background: url('../assets/image/btn_appointment.png') 0 0 no-repeat; */
	}

</style>

<script>
export default {
  name: 'topHeader',
  data() {
    return {
			menuList: ['首页', '家长口碑', '师资团队', '孩子风采', '课程体系'],
			tab_id: 0,
			isMobile: false,
			appointmentStep: 1,
			maskShowStatus: false,
			formAppointment: {
				mobile: '',
				studentName: '',
				schoolId: '',
				childAge: '',
				productId: '',
			},
			verificodeData: {
				verificode: '',
				phone: '',
			},
			veri_time: 0,
			schoolAreaList: [],
			classList: [],
			studentAgeList: [
				{
					dicCode: "2",
					dicLabel: "3岁以下",
				},
				{
					dicCode: "3",
					dicLabel: "3岁",
				},
				{
					dicCode: "4",
					dicLabel: "4岁",
				},
				{
					dicCode: "5",
					dicLabel: "5岁",
				},
				{
					dicCode: "6",
					dicLabel: "6岁",
				},
				{
					dicCode: "7",
					dicLabel: "7岁",
				},
				{
					dicCode: "8",
					dicLabel: "8岁",
				},
				{
					dicCode: "9",
					dicLabel: "9岁",
				},
				{
					dicCode: "10",
					dicLabel: "10岁",
				},
			],
    }
	},
	beforeCreate() {
		
	},
	created() {
		this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
		
		if(this.$route.name == 'about') {
			this.tab_id = 5
		}

		let isAppointment = this.$route.query.isAppointment;
		if(isAppointment) {
			this.appointmentClick();
		}
	},
	methods: {
		toAbout() {
			this.$router.push({
				name: 'about',
			})
			this.tab_id = 5
			
		},
		toHome() {
			this.$router.push({
				name: 'home'
			})
		},
		initValCode() {
			this.$axios.get('http://39.105.125.149:8090/banma/sendVerificationCode', {
				params: {
					mobile: this.formAppointment.mobile
				}
			}).then((res) => {
				if(res.data.code == 200) {
					this.veri_time = 60;
					this.timeDown(this.veri_time)
				}else{
					this.showAlertMsg(res.data.msg)
				}
				
			}).catch(err => {
				this.$message.error(err);
			})
			
		},

		timeDown(times) {
			let timer = setInterval(() => {
				this.veri_time -= 1;
				if (this.veri_time == 0) {
					clearInterval(timer);
				}
			}, 1000);
		},

		appointmentSubmit(stepName,step) {
			let data = this.formAppointment;
			data.verificationCode = this.verificodeData.verificode

			data.linkPhone = data.mobile
			data.sex = '1'

			if(!this.verificodeData.verificode) {
				this.showAlertMsg('验证码不能为空');
				return false;
			}

			this.schoolAreaList.forEach(item => {
				if(data.schoolId == item.schoolId) {
					data.schoolName = item.schoolName
				}
			})

			this.classList.forEach(item => {
				if(data.productId == item.productId) {
					data.productName = item.productName
				}
			})

			this.$axios.post('http://39.105.125.149:8090/banma/insertStudent', data).then(res => {
				if(res.data.code == 200) {
					this[stepName] = step;
				}
				else{
					this.showAlertMsg(res.data.message)
				}
			}).catch(err => {
				this.$message.error(err);
			})
		},

		changeSchool() {
			this.initProduct();
		},

		initProduct() {
			// 试听课程
			this.$axios.get('http://39.105.125.149:8090/bmSchoolOpen/queryProductBySchoolId', {
				params: {
					schoolId: this.formAppointment.schoolId,	
				}
			}).then(res => {
				this.classList = res.data.data
			}).catch(err => {
				this.$message.error(err);
			})
		},

		initSelect() {
			// 附近分校
			this.$axios.get('http://39.105.125.149:8090/banma/querySchoolList', {
				params: {
					// dicKey: 'nearbyBranch',	
					schoolId: '',	
				}
			}).then(res => {
				this.schoolAreaList = res.data.data
			}).catch(err => {
				this.$message.error(err);
			})


			// 年龄
			// this.$axios.get('http://39.105.125.149:8090/bmDic/queryByDicKey', {
			// 	params: {
			// 		dicKey: 'studentAge',
			// 		dicCode: '',
			// 	}
			// }).then(res => {
			// 	this.studentAgeList = res.data.data
			// }).catch(err => {
			// 	this.$message.error(err);
			// })
		},

		nextStep(stepName,step) {
			
			if(step == 3) {
				if(stepName == 'appointmentStep') {
					if(this.verificodeData.verificode == '') {
						this.showAlertMsg('请输入验证码');
						return false;
					}
				}

				if(stepName == 'consultationStep') {
					if(this.verificodeData.verificode == '') {
						this.showAlertMsg('请输入验证码');
						return false;
					}
				}
				
			}

			let phoneReg = /^1[34578]\d{9}$/;
			let veriPhone = phoneReg.test(this.formAppointment.mobile)

			if(!veriPhone) {
				this.showAlertMsg('请输入正确的手机号');
				return false;
			}

			if(step == 2) {
				let str = this.formAppointment.mobile
				this.verificodeData.phone = str.replace(/(\w{3})\w*(\w{4})/, '$1xxxx$2')
			}

			if(step == 3) {
				
			}


			
			this[stepName] = step;
		},
		clickMenu(index) {
			if(this.$route.name == 'home') {
				this.$parent.clickMenu(index);
			}else{
				this.$router.push({
					name: 'home',
					params: {
						tab_id: index
					}
				})
			}
      
		},
		appointmentClick() {
			// this.$parent.appointmentClick();
			this.initSelect();

			this.maskShowStatus = true; 
			// this.showPopName = '预约试听';
			this.appointmentStep = 1;
			this.clearForm(this.formAppointment)
			this.clearForm(this.verificodeData)
		},
		showAlertMsg(message) {
			this.$message({
				dangerouslyUseHTMLString: true,
				message: '<span class="alert_msg_box"><i class="icon_wran"></i><span class="alert_msg">'+ message +'</span></span>',	
				center: true,
				duration: 1000,
				offset: 100,
			});
		},
		clearForm(data) {
			for (let i in data) {
				if (data.hasOwnProperty(i) === true) {
					data[i] = "";
				}
			}
		}
	}
}
</script>